/*
 * App Global CSS
 * ----------------------------------------------------------------------------
 * Put style rules here that you want to apply globally. These styles are for
 * the entire app and not just one component. Additionally, this file can be
 * used as an entry point to import other CSS/Sass files to be included in the
 * output CSS.
 * For more information on global stylesheets, visit the documentation:
 * https://ionicframework.com/docs/layout/global-stylesheets
 */

/* Core CSS required for Ionic components to work properly */
@import "~@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */
@import "~@ionic/angular/css/normalize.css";
@import "~@ionic/angular/css/structure.css";
@import "~@ionic/angular/css/typography.css";
@import '~@ionic/angular/css/display.css';

/* Optional CSS utils that can be commented out */
@import "~@ionic/angular/css/padding.css";
@import "~@ionic/angular/css/float-elements.css";
@import "~@ionic/angular/css/text-alignment.css";
@import "~@ionic/angular/css/text-transformation.css";
@import "~@ionic/angular/css/flex-utils.css";




// http://ionicframework.com/docs/theming/
// App Shared Imports
// --------------------------------------------------

// global styles
html {
  font-size: 62.5%;
}

.yellow__div {
  position: absolute;
  height: 15px;
  background-color: #d4dd22;
  width: 100%;
  bottom: 0;
  left: 0;
}

.toast-message,
ion-title{
  text-align: center;
}

.primary-bg {
  background-color: var(--ion-color-primary) !important;
}

.secondary-bg {
  background-color: var(--ion-color-secondary) !important;
}

.common-bg {
  background-color: #FAFBFC;
}

.white-bg {
  background-color: #fff;
}

.detail-bg {
  background-color: #f1f1f5;
}

.light-bg {
  background-color: var(--ion-color-light);
}

.dark-bg {
  background-color: var(--ion-color-dark);
}

.green-bg {
  background-color: #68C91F;
}

.profile-bg {
  background-image: linear-gradient(135deg, var(--ion-color-dark), var(--ion-color-primary), var(--ion-color-light));
}
//
//
.text-primary {
  color: var(--ion-color-primary);
}

.text-secondary {
  color: var(--ion-color-secondary);
}

.text-green {
  color: #68C91F;
}

.text-yellow {
  color: #FDD835;
}

.text-white {
  color: #fff;
}

//
.dark-trans,
.toast-md .toast-wrapper {
  background-color: rgba(0, 0, 0, .4);
}


// Helpers
.quarter-op {
  opacity: .25;
}

.no-paddingTRL {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}

.no-paddingTRB {
  padding-top: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

.no-paddingB {
  padding-bottom: 0 !important;
}

.no-paddingT {
  padding-top: 0 !important;
}

.padding-xs {
  padding: 10px;
}

.no-padding {
  padding: 0 !important;
}

.no-pl {
  padding-left: 0 !important;
}

.no-margin {
  margin: 0;
}

.no-marginT {
  margin-top: 0 !important;
}

.mt-half {
  margin-top: .5rem !important;
}

.mt-1 {
  margin-top: 1rem !important;
}

.mb-half {
  margin-bottom: .5rem;
}

.marginB-16px {
  margin-bottom: 16px !important;
}

.marginB-2 {
  margin-bottom: 2rem !important;
}

.marginT-16px {
  margin-top: 16px !important;
}

.marginT-2 {
  margin-top: 2rem !important;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}

.rlt {
  position: relative;
}

.clear {
  clear: both;
}

.align-bottom {
  position: absolute;
  bottom: 0;
}

.round {
  border-radius: 1rem;
  overflow: hidden;
}

.no-round {
  border-radius: 0;
}

.border-bottom {
  border-bottom: 1px solid rgba(86, 61, 124, 0.1);
}

.full-width {
  width: 100% !important;
}

.max-width {
  max-width: 100% !important;
}

.padding-sm {
  padding: 1rem;
}

.uppercase {
  text-transform: uppercase;
}

// text size
.text-2x {
  font-size: 2em;
}

.text-1x {
  font-size: 1em;
}

.text-sm {
  font-size: 0.7em;
}

.bold {
  font-weight: bold !important;
}

// buttons configs
.btn-facebook {
  --background: #3B5999;
}

.btn-twitter {
  --background: #00ACEE;
}

.btn-gplus {
  --background: #E04006
}

// badge style
ion-badge {
  &.square {
    border-radius: 0;
  }
}

// card style
.card {
  background: #FFF;
  border-radius: 1rem;
  box-shadow: 0 0 1px rgba(86, 61, 124, 0.2), 0 2px 4px rgba(86, 61, 124, 0.15);
}

// navbar style
ion-toolbar.no-border {

  .toolbar-background {
    border: none;
  }
}

// list style
.list-no-border {

  .item:first-child {
    border: none;
  }
  .item:last-child {
    border: none;
  }

  .item {
    .item-inner {
      border: none;
    }
  }
}

.list-full-border {
  @extend .list-no-border;

  .item,
  .item:first-child,
  .item:last-child {
    border-bottom: 1px solid rgba(86, 61, 124, 0.2);
    .item-inner {
      border: none;
    }
  }
}

// item style
.item.no-border {
  .item-inner {
    border: none;
  }
}

// Toolbar
// transparent nav bar
.toolbar {
  &.nav-transparent {
    .toolbar-background {
      background-color: rgba(86, 61, 124, .65);
    }
  }
  .toolbar-title {
    img {
      vertical-align: sub;
      border-radius: 10%;
    }
  }
}

// style for auth pages
.auth-page {
  background-color: #fff;
  &::after {
    content: "";
    background: url("assets/images/login.png") no-repeat;
    background-position: center;
    background-size: 100% 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0;
  }

  .scroll-content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    min-height: 100vh;
    --overflow: scroll;
    //background: rgba(50, 10, 92, .4);

    .login-content {
      width: 86%;
      z-index: 1;

      .logo {
        width: 70px;
        height: 70px;
        margin: 20px auto 0;
        border-radius: 10%;
        background: url("/assets/images/logo.png") no-repeat;
        background-size: 100%;
      }

      .list-form {
        padding: 20px;
        margin-bottom: 0;
        background: rgba(0, 0, 0, 0.3);

        ion-item {
          --background: transparent;
          padding: 0;

          &:first-child {
            border-top: none;
          }

          &:after {
            display: none;
          }

          ion-label {
            font-size: 1em;
            --color: var(--ion-color-primary);
          }

          input {
            color: #fff;
          }
        }
      }
    }
  }
}

// Menu user profile
.user-profile {
  padding: 4px !important;
  min-height: 56px;
  --background: linear-gradient(135deg, var(--ion-color-dark), var(--ion-color-primary));

  .user-avatar {
    width: 68px;
    height: 68px;
    display: inline-block;
    border-radius: 50%;
    box-shadow: inset 0 0 10rem rgba(0,0,0,.25), 0 0 4rem rgba(255,255,255,.45);
    img {
      border-radius: 50%;
    }
  }

  .other-data {
    .column {
      &:first-child {
        border-right: 1px solid rgba(36, 50, 157, .25);
      }
    }
  }
}

.user-list {
  .item {
    &:last-child {
      border-bottom: 0;
    }
    .item-inner {
      border-color: rgba(86, 61, 124, .1);
    }
  }
}

// styles for hotels
.hotel-bg {
  background-position: center;

  .bg-filter {
    position: relative;
    height: 150px;
    background: rgba(0, 0, 0, .5);

    .bottom-info {
      position: absolute;
      width: 100%;
      bottom: 1rem;
      padding: 1rem;
    }
  }

  .discount {
    position: absolute;
    padding: 0.5rem 1rem;
    top: 0;
    right: 0;
    background-color: #68C91F;
    color: #fff;
  }

  .origin-price {
    color: #C0C0C0;
    text-decoration: line-through;
  }

  .sale-price,
  .price {
    font-size: 1.8rem;
  }
}

// style for slider
ion-slides.to-top {
  height: auto;
  margin-bottom: -5px;

  .swiper-pagination {
    display: block !important;

    .swiper-pagination-bullet {
      background: var(--ion-color-light);
    }
  }
}

.to-top {
  height: auto;
  margin-bottom: -5px;
}

// style for ion-icon
ion-icon[ng-reflect-disabled="true"] {
  color: #FAFBFC;
  pointer-events: none;
}

// checkout info style
.checkout-info {

  span {
    font-size: 1.2rem;
  }
}

// remove shadow from header
.md {
  ion-header {
    &.no-shadow::after {
      background-image: none;
    }
  }

  ion-toolbar {
    .button,
    .button.activated {
      box-shadow: none;
    }
  }
}

.ios {
  ion-list ion-item,
  .list-hotels .hotel-bg {
    pointer-events: none;
  }
}

// google
.google-map {
  height: 160px;
  pointer-events: none;
  margin: 0 -20px;
}

// Animate CSS
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}

.animated.infinite {
  animation-iteration-count: infinite;
}

.animated.hinge {
  animation-duration: 2s;
}

.animated.flipOutX,
.animated.flipOutY,
.animated.bounceIn,
.animated.bounceOut {
  animation-duration: .75s;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.fadeInDown {
  animation-name: fadeInDown;
}


// ionic 4-5
ion-split-pane {
  z-index: 1;
}
ion-icon {
  fill: #fff;
}
ion-button {
  --border-radius: 2px;
}
ion-text {
  --color: #fff;
}
p {
  padding: 5px;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.4rem;
}
span {
  font-size: 1.4rem;
}

page-home {
  .imgContainer:nth-child(1) {
    display:flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 1rem;
    background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) ), url('assets/images/user.jpg') no-repeat;background-size: 50% 100%;
    background-color: #2d58d5;
    background-position: right;
  }
  .imgContainer:nth-child(2) {
    display:flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 1rem;
    background: linear-gradient( rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) ), url('assets/images/menus.jpg') no-repeat;background-size: 50% 100%;
    background-color: #2d58d5;
  }
}

page-qr-scanner {
  .backg {
    background: url("assets/images/fondo_madera.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    width: 100%;
    min-height: 100%;
    top: 0;
    left: 0;
  }

  .qr {
    height: 230px;
    width: 230px;
    background: url('assets/images/qr.png'), #fff;
    background-size: cover;
    margin: auto;
  }
}

page-option-restaurant {
  .header {
    height: 20rem;
    display: flex;
    background: url('assets/images/logo.png');
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
  }

  .backg {
    background: url('assets/images/fondo_madera.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
  }

  .full_loader {
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('assets/images/fondo_madera.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
  }
}

page-categories {
  .backg {
    background: url('assets/images/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
  }

  .big-picture-container {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)),
      url('assets/images/logo.jpg') center no-repeat;
    background-size: cover;
    height: 180px;
    width: 100%;
    position: relative;
    padding: 10px;
  }
}

page-order-confirmation {
  .backg {
    background: url('assets/images/fondo_madera.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
  }
}

page-profile {
  .auth-profile {
    background-color: #fff;

    &::after {
      content: '';
      background: url('assets/images/fondo_madera.jpg') no-repeat;
      background-size: cover;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: absolute;
      z-index: 0;
    }
  }
}

page-general-menu {
  .backg {
    background: url('assets/images/bg.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
  }
}

page-checkout {
  .backg {
    background: url('/assets/images/fondo_madera.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
  }

  .big-picture-container {
    background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.5)),
      url('assets/images/logo.jpg') center no-repeat;
    background-size: cover;
    height: 180px;
    width: 100%;
    position: relative;
    padding: 10px;
  }
}

page-payment-checkout {
  .backg {
    background: url('assets/images/restaurant.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
  }
}

page-payment-options {
  .backg {
    background: url('/assets/images/fondo_madera.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
  }
}

ion-header {
  ion-toolbar {
    ion-title {
      --color: #fff;
    }
  }
}

ion-menu-toggle {
  ion-button {
    --color: #fff;

    ion-icon {
      --color: #fff;
    }
  }
}